css-what

What is css-what?

The css-what npm package is a CSS selector parser that translates CSS selectors into an easy-to-process format. It is often used in server-side applications or tools that need to interpret and manipulate CSS selectors programmatically.

What are css-what's main functionalities?

Parsing CSS Selectors

This feature allows you to parse a CSS selector string into a structured format. The code sample demonstrates how to parse a complex CSS selector into an array of objects representing each part of the selector.

const parse = require('css-what');
const selector = 'div > .className[attr=value]';
const parsed = parse(selector);
console.log(parsed);

Other packages similar to css-what

css-select

css-select is a CSS selector engine that uses css-what under the hood to parse selectors. It extends the parsing capabilities with selecting elements from a DOM tree, making it more suitable for tasks that involve DOM manipulation.

cheerio

cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It uses css-what indirectly through css-select for parsing CSS selectors. Cheerio provides a full jQuery-like API for traversing and manipulating the DOM.

jsdom

jsdom is a pure-JavaScript implementation of many web standards, notably the DOM and HTML standards. It allows you to interact with a DOM tree using standard DOM APIs. While jsdom does not use css-what directly, it provides similar functionality in terms of interpreting and applying CSS selectors to a DOM structure.

README

css-what

a CSS selector parser

Example

require('css-what')('foo[bar]:baz')

~> [ [ { type: 'tag', name: 'foo' },
    { type: 'attribute',
      name: 'bar',
      action: 'exists',
      value: '',
      ignoreCase: false },
    { type: 'pseudo',
      name: 'baz',
      data: null } ] ]

API

CSSwhat(selector, options) - Parses str, with the passed options.

The function returns a two-dimensional array. The first array represents selectors separated by commas (eg. sub1, sub2), the second contains the relevant tokens for that selector. Possible token types are:

name	attributes	example	output
tag	name	div	{ type: 'tag', name: 'div' }
universal	-	*	{ type: 'universal' }
pseudo	name, data	:name(data)	{ type: 'pseudo', name: 'name', data: 'data' }
pseudo	name, data	:name	{ type: 'pseudo', name: 'name', data: null }
pseudo-element	name	::name	{ type: 'pseudo-element', name: 'name' }
attribute	name, action, value, ignoreCase	[attr]	{ type: 'attribute', name: 'attr', action: 'exists', value: '', ignoreCase: false }
attribute	name, action, value, ignoreCase	[attr=val]	{ type: 'attribute', name: 'attr', action: 'equals', value: 'val', ignoreCase: false }
attribute	name, action, value, ignoreCase	[attr^=val]	{ type: 'attribute', name: 'attr', action: 'start', value: 'val', ignoreCase: false }
attribute	name, action, value, ignoreCase	[attr$=val]	{ type: 'attribute', name: 'attr', action: 'end', value: 'val', ignoreCase: false }
child	-	>	{ type: 'child' }
parent	-	<	{ type: 'parent' }
sibling	-	~	{ type: 'sibling' }
adjacent	-	+	{ type: 'adjacent' }
descendant	-		{ type: 'descendant' }

Options:

• xmlMode: When enabled, tag names will be case-sensitive (meaning they won't be lowercased).

---

License: BSD-2-Clause